<template>
  <div>
    <Breadcrumb :style="{margin: '16px 0'}">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>用户信息</BreadcrumbItem>
      <BreadcrumbItem>用户列表</BreadcrumbItem>
    </Breadcrumb>
    <Card>
      <Row>
        <Col>
          <Button type="primary" @click="$router.push('/user/add')">添加用户</Button>
        </Col>
      </Row>
      <div style="min-height: 600px;margin-top: 20px;">
        <Table stripe :columns="columns" :data="data"></Table>
        <Page
          :page-size="pageSize"
          :current="pageNo"
          :total="pageTotal"
          @on-change="getList"
          style="margin-top: 30px;"
        ></Page>
      </div>
    </Card>
    <!-- <Modal v-model="disableUser" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>禁用此账号</span>
      </p>
      <div style="text-align:center">
        <p>将此账号数据转移至：</p>
        <Select style="margin-top: 15px;" label-in-value @on-change="changeTransferUser">
          <Option v-for="user in userData" :label="user.userName" :value="user.id" :key="user.id"></Option>
        </Select>
      </div>
      <div slot="footer">
        <Button type="error" @click="handleDisableUser">直接禁用</Button>
        <Button type="primary" @click="handleTransferUser">转移后禁用</Button>
      </div>
    </Modal> -->
  </div>
</template>

<script>
import qs from "qs";
export default {
  // middleware: 'auth',
  data() {
    return {
      columns: [
        {
          title: '#',
          type: 'index',
          width: 60
        },
        {
          title: "用户名",
          key: "userName"
        },
        {
          title: "账号",
          key: "account"
        },
        {
          title: "用户等级",
          key: "level",
          render: (h, params) => {
            const text = params.row.level == 1 ? "管理员" : "普通用户";
            const color = params.row.level == 1 ? "primary" : "default";
            return h(
              "Tag",
              {
                props: {
                  size: "large",
                  color: color
                }
              },
              text
            );
          }
        },
        {
          title: "状态",
          key: "status",
          render: (h, params) => {
            const row = params.row;
            const status = row.status == 1 ? "primary" : "error";
            const text = row.status == 1 ? "正常" : "注销";

            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: status,
                  size: "large"
                }
              },
              text
            );
          }
        },
        {
          title: "管理",
          // width: 210,
          render: (h, params) => {
            const row = params.row;

            return h(
                "Button",
                {
                  props: {
                    type: row.status == 1 ? "error" : "success"
                  },
                  style: {
                    marginLeft: "10px"
                  },
                  on: {
                    click: () => {
                      this.changeStatus(row);
                    }
                  }
                },
                row.status == 1 ? "禁用" : "启用"
              )

            // return h("div", [
            //   h(
            //     "Button",
            //     {
            //       props: {
            //         type: "primary"
            //       },
            //       on: {
            //         click: () => {
            //           this.changeLevel(row);
            //         }
            //       }
            //     },
            //     "修改用户等级"
            //   ),
            //   h(
            //     "Button",
            //     {
            //       props: {
            //         type: row.status == 1 ? "error" : "success"
            //       },
            //       style: {
            //         marginLeft: "10px"
            //       },
            //       on: {
            //         click: () => {
            //           this.changeStatus(row);
            //         }
            //       }
            //     },
            //     row.status == 1 ? "禁用" : "启用"
            //   )
            // ]);
          }
        }
      ],
      data: [],
      levelid: "",
      status: "",
      pageNo: 1,
      pageSize: 10,
      pageTotal: 10,
      disableUser: false,
      userData: [],
      transferUser: {}
    };
  },
  methods: {
    changeLevelWarning() {
      this.$Modal.info({
        title: "确定修改此用户权限等级？",
        content: "此次操作涉及用户所拥有的权限，请确认。",
        onOk: () => {
          this.$axios
            .post(
              "/bm/opera/sysuser/updateLevel",
              qs.stringify({
                userId: row.id,
                level: this.levelid
              })
            )
            .then(res => {
              if (res.data.code == 200) {
                this.$Modal.remove();
                this.$Notice.success({
                  title: "用户等级修改成功",
                  duration: 3
                });
              } else {
                this.$Notice.error({
                  title: "用户等级修改失败"
                });
              }
            });
        },
        onCancel: () => {
          this.$Modal.remove();
        }
      });
    },
    changeLevel(row) {
      this.$Modal.confirm({
        onOk: () => {
          this.$axios
            .post(
              "/bm/opera/sysuser/updateLevel",
              qs.stringify({
                userId: row.id,
                level: this.levelid
              })
            )
            .then(res => {
              if (res.data.code == 200) {
                // this.$Modal.remove()
                // this.$options.methods.getList()
                this.$Message.success("用户等级修改成功");
                this.$axios
                  .get(
                    "/bm/opera/sysuser/findSysuserPageList?pageNo+" +
                      this.pageNo +
                      "&pageSize=" +
                      this.pageSize
                  )
                  .then(res => {
                    if (res.data.code == 200) {
                      this.data = res.data.detail.list;
                    }
                  });
              } else {
                this.$Notice.error({
                  title: "用户状态修改失败"
                });
              }
            });
        },
        onCancel: () => {
          this.$Notice.info({
            title: "用户取消修改"
          });
        },
        render: h => {
          return h("div", [
            h(
              "h2",
              {
                style: {
                  marginBottom: "20px"
                }
              },
              "修改用户等级"
            ),
            h(
              "Select",
              {
                props: {
                  value: row.level
                },
                on: {
                  "on-change": aaa => {
                    this.levelid = aaa;
                  }
                }
              },
              [
                h("Option", {
                  props: {
                    value: "1",
                    label: "管理员"
                  }
                }),
                h("Option", {
                  props: {
                    value: "2",
                    label: "普通用户"
                  }
                })
              ]
            )
          ]);
        }
      });
    },
    reqStatus(_self, row) {
      _self.$axios
        .post(
          "/bm/opera/sysuser/disableUser",
          qs.stringify({
            userId: row.id,
            status: row.status == 1 ? "2" : "1"
          })
        )
        .then(res => {
          if (res.data.code == 200) {
            _self.$Message.success("用户状态修改成功");
            _self.$axios
              .get(
                "/bm/opera/sysuser/findSysuserPageList?pageNo+" +
                  _self.pageNo +
                  "&pageSize=" +
                  _self.pageSize
              )
              .then(res => {
                if (res.data.code == 200) {
                  _self.data = res.data.detail.list;
                }
              });
          } else {
            _self.$Message.error(res.data.description);
          }
        });
    },
    changeStatus(row) {
      if (row.status == 1) {
        // this.$options.methods.getCommonUser(this)
        // this.disableUser = true
        // this.nowRow = row
        this.$Modal.confirm({
          title: '禁用此账户？',
          onOk: () => {
            this.$options.methods.reqStatus(this, row)
          },
          onCancel: () => {
            this.$Message.info("用户取消修改");
          }
        })
      } else {
        if (row.status == 2) {
          this.$Modal.confirm({
            title: '启用此账户？',
            onOk: () => {
              this.$options.methods.reqStatus(this, row)
            },
            onCancel: () => {
              this.$Message.info("用户取消修改");
            }
          })
        }
      }
    },
    // handleDisableUser() {
    //   this.$options.methods.reqStatus(this, this.nowRow)
    //   this.disableUser = false
    // },
    // handleTransferUser() {
    //   if(!this.transferUser.id) {
    //     this.$options.methods.reqStatus(this, this.nowRow)
    //   } else {
    //     this.$axios.post('/bm/opera/sysuser/transformSysuserInfo', qs.stringify({
    //       isTracUserId: this.nowRow.id,
    //       tracUserId: this.transferUser.id
    //     })).then(res => {
    //       if(res.data.code == 200) {
    //         this.$Notice.success(`您已将用户<code>${this.transferUser.name}</code>的数据成功转移至用户<code>${this.nowRow.userName}</code>！`)
    //       } else {
    //         this.$Notice.error(`用户<code>${this.transferUser.name}</code>的数据转移至用户<code>${this.nowRow.userName}</code>失败！`)
    //       }
    //     })
    //   }
    //   this.disableUser = false
    // },
    changeTransferUser(val) {
      this.transferUser = {
        id: val.value,
        name: val.label
      }
    },
    getList(n) {
      this.$axios
        .get(
          "/bm/opera/sysuser/findSysuserPageList?pageNo=" +
            n +
            "&pageSize=" +
            this.pageSize
        )
        .then(res => {
          if (res.data.code == 200) {
            this.data = res.data.detail.list;
            this.pageNo = n;
          } else {
            this.$Message.error("列表获取失败，请刷新重试");
          }
        }).catch(err => {
          this.$Message.error("列表获取失败，请刷新重试");
        });
    },
    getCommonUser(_self) {
      _self.$axios.get('/bm/opera/sysuser/findSysuserList').then(res => {
        if(res.data.code == 200) {
          _self.userData = res.data.detail
        }
      })
    }
  },
  mounted: function() {
    const url =
      "/bm/opera/sysuser/findSysuserPageList?pageNo=" +
      this.pageNo +
      "&pageSize=" +
      this.pageSize;
    this.$axios.get(url).then(res => {
      if (res.data.code == 200) {
        this.data = res.data.detail.list;
        this.pageTotal = res.data.detail.total;
      } else {
        this.$Message.error("列表获取失败，请刷新重试");
      }
    });

  }
};
</script>
